<template>
  <el-container id="videoConfrencingPage">
    <el-aside>
      <ul class="confrencing-li">
        <li @click="mountedCom(1)" :class="{active:isactive==1}">
          <img src="../../assets/icon/huiyi-list.png"> 会议列表
        </li>
        <li @click="mountedCom(2)" :class="{active:isactive==2}">
          <img src="../../assets/icon/my-huiyi.png"> 我的会议
        </li>
        <li @click="mountedCom(3)" :class="{active:isactive==3}">
          <img src="../../assets/icon/huiyi-anpai.png"> 安排会议
        </li>
        <li @click="mountedCom(4)" :class="{active:isactive==4}">
          <img src="../../assets/icon/lianxiren.png"> 联系人
        </li>
      </ul>
    </el-aside>
    <el-main>
      <CreatConfrencing v-if='itemCount==3'></CreatConfrencing>
      <ConfrencingList v-if='itemCount==1'></ConfrencingList>
      <CreatedConfrencingList v-if='itemCount==2'></CreatedConfrencingList>
    </el-main>
  </el-container>
</template>

<script>
import CreatConfrencing from './CreatConfrencing';
import ConfrencingList from './ConfrencingList';
import CreatedConfrencingList from './CreatedConfrencingList';
export default {
  components:{CreatConfrencing,ConfrencingList,CreatedConfrencingList},
  data() {
    return {
      itemCount:1,
      isactive:0,
    };
  },
  created() {},
  mounted() {
    this.mountedCom(1);
  },
  methods: {
    mountedCom(n) {
      if(n==4){
        this.$message.error("功能正在马不停蹄开发中...敬请期待");
      }else{
        this.itemCount=n;
        this.isactive=n;
      }
    },
  }
};
</script>
<style lang="scss">
</style>

<style scoped lang="scss">
@import "scss_vars";
#videoConfrencingPage {
  position: absolute;
  margin-left: 120px;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: default;
  .el-aside {
    flex: 0 0 200px;
    height: 100%;
    width: 200px !important;
    background: $main-bg;
    overflow-y: auto;
    overflow-x: auto;
    border-right: 1px solid $black-bg;
    .confrencing-li {
      display: block;
      li {
        vertical-align: middle;
        display: block;
        margin-left: 40px;
        margin-top: 22px;
        height: 16px;
        line-height: 16px;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        img {
          margin-right: 2px;
          height: 14px;
        }
      }
      li:hover {
        color: rgba(84, 157, 232, 1);
        cursor: pointer;
      }
      .active{
        color: rgba(84, 157, 232, 1);
      }
    }
  }

  .el-main {
    flex: 1;
    background: white;
    padding: 0;
  }
}
</style>